<template>
  <!--<ul>-->
  <!--  <li>-->
  <!--    <a href="/message1">message001</a>&nbsp;&nbsp;-->
  <!--  </li>-->
  <!--  <li>-->
  <!--    <a href="/message2">message002</a>&nbsp;&nbsp;-->
  <!--  </li>-->
  <!--  <li>-->
  <!--    <a href="/message3">message003</a>&nbsp;&nbsp;-->
  <!--  </li>-->
  <!--</ul>-->
  <div>
    <ul>
      <li v-for="m in messageList" :key="m.id">
        <!--跳转路由并携带query参数，to的字符串写法-->
        <!--<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">-->
        <!--  {{m.title}}-->
        <!--</router-link>&nbsp;&nbsp;-->

        <!--跳转路由并携带query参数，to的对象写法-->
        <router-link :to="{
            //path: '/home/message/detail',
            //使用name跳转
            name: 'xiangqing',
            // query:{
            //     id:m.id,
            //     title:m.title
            // }
            params:{
                id:m.id,
                title:m.title
            }
            }">
          {{ m.title }}
          <!--</router-link>&nbsp;&nbsp;-->
        </router-link>
        <button @click="showPush(m)">push查看</button>
        <button @click="showReplace(m)">replace查看</button>
      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Message",
  data() {
    return {
      messageList: [
        {id: '001', title: '消息001'},
        {id: '002', title: '消息002'},
        {id: '003', title: '消息003'}
      ]
    }
  },
  methods:{
    showPush(m){
      this.$router.push({
        name: 'xiangqing',
        query:{
          id:m.id,
          title:m.title
        }
      })
    },
    showReplace(m){
      this.$router.replace({
        name:'xiangqing',
        query:{
          id:m.id,
          title:m.title
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
